<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS素材</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
  &lt;&gt;
  &lt;/&gt;

</p>
<div class="main-content">
  <p>一、CSS简介</p>
  <p>CSS是层叠样式表，由选择器，属性，值组成</p>
  <pre class="code">
selector {
  property1: value;
  property2: value1 value2;
}</pre>
  <p>CSS的引入方式4种</p>
  <p>1、行内引入</p>
  <pre class="code">
&lt;div&gt; style="property1:value ..." &lt;div/&gt;
</pre>
  <p>2、嵌入式，在header中使用style标签</p>
  <pre class="code">
&lt;head&gt;
      &lt;style type="text/css"&gt;
        ...
      &lt;/style&gt;
&lt;/head&gt;
</pre>
  <p>3、导入css文件，将在网页装载完成后再加载css文件</p>
  <pre class="code">
&lt;head&gt;
      &lt;style type="text/css"&gt;
        @import "xxx.css";
      &lt;/style&gt;
&lt;/head&gt;
</pre>
  <p>4、链接引入，在网页加载之前加载css文件</p>
  <pre class="code">
&lt;head&gt;
      &lt;link href="xxx.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt;
</pre>

  <p>CSS优先级</p>
  <ul>
    <li>行内样式优先级最高</li>
    <li>不同样式的属性将合并 比如相同名称的选择器一个定义宽度一个定义高度，合并宽高都显示</li>
    <li>相同样式将选用HTML标签最近的</li>
    <li>!important 在属性后面添加，提高属性优先级</li>
  </ul>

  <p>二、选择器</p>
  <p>基本选择器</p>
  <p>1、*作为选择器名称，匹配所有标签适用的属性</p>
  <pre class="code">
*{margin 0; padding 0;}</pre>
  <p>2、标签作为选择器名称</p>
  <pre class="code">
/* 所有div标签背景色红色 */
div {background-color: red;}</pre>

  <p>3、点+class属性名作为选择器名称</p>
  <pre class="code">
/* 所有含class="code"的标签背景色红色 */
.code {background-color: red;}</pre>
  <p>4、#+id属性名作为选择器名称</p>
  <pre class="code">
/* id="code"的标签背景色红色 */
#code {background-color: red;}</pre>

  <p>组合选择器，<b><em>由前面提到的多个基本选择器组合而成</em></b>，以下是用标签选择器为例</p>
  <p>1、多元素组合选择器，多个标签名用逗号隔开</p>
  <pre class="code">
/* 所有div p h1的标签背景色红色 */
div，p，h1 {background-color: red;}</pre>
  <p>2、嵌套元素标签，以空格分隔，嵌套的元素标签生效</p>
  <pre class="code">
/* div标签中所有span标签，包括嵌套元素中包含的span都会生效 */
div span {background-color: red;}</pre>
  <p>3、子元素标签，用 > 分隔</p>
  <pre class="code">
/* div标签中所有span标签，嵌套元素中包含的span不会生效 */
div > span {background-color: red;}</pre>
  <p>4、相邻元素选择器，用 + 分隔</p>
  <pre class="code">
/* div标签后面紧接着的span标签生效，每次匹配都必须满足条件 */
div + span {background-color: red;}</pre>

  <p>伪X选择器，在W3School中称作伪类和伪元素</p>
  <p>1、伪类</p>
  <p>一般格式selector: pseudo-class {property: value}</p>
  <p>也可以用类选择器、id选择器结合使用 <br/>
    selector.xxCls: pseudo-class {property: value}<br/>
    selector#xxId: pseudo-class {property: value}<br/>
  </p>
  <p>常见伪类：link、visited、hover（鼠标在标签上）、active、first-child（作为某元素的第一个子元素）</p>
  <pre class="code">
a:link {color: red}		/* 未访问的链接 */
a:visited {color: green}	/* 已访问的链接 */
a:hover {color: blue}	/* 鼠标移动到链接上 */
a:active {color: #000}	/* 选定的链接 */

/* id为tid的链接 鼠标移动到标签上的颜色，该伪类可以用于其他所有标签 */
a#tid:hover {color: #000}</pre>
  <div class="code-show">
    <p>CSS伪类 <a href="https://www.w3school.com.cn/css/css_pseudo_classes.asp" target="_blank">https://www.w3school.com.cn/css/css_pseudo_classes.asp</a></p>
    <span class="thover">item1</span>
    <span class="thover">item2</span>
    <span class="thover">item3</span>
  </div>
  <p>2、伪元素</p>
  <p>为某些选择器设置特殊效果，first-line（选中第一行文本，块级元素），first-setter（选中第一个字符、块级元素），
    before在元素前插入新内容，after在元素后插入新内容</p>
  <span>更多CSS使用方案，参考W3School手册</span><br/>
  <a href="https://www.w3school.com.cn/cssref/index.asp" target="_blank">https://www.w3school.com.cn/cssref/index.asp</a>





</div>
</body>
</html>
